import React, { useEffect } from "react";
import "./My.css";
import { useState } from "react";
import { Image, Popup, Cell, PopupPosition, Button } from "react-vant";
import { Arrow, Clear } from '@react-vant/icons';
import { useCustomNavigate } from '../../hooks/useNavigate'
const My: React.FC = () => {
    const { goToPage } = useCustomNavigate();
    const [state, setState] = useState<PopupPosition>('')
    const onClose = () => setState('')

    useEffect(() => {
        const integralShop = sessionStorage.getItem('integralShop')
        if (integralShop) {
            if ((JSON.parse(integralShop).flag) === true) {
                sessionStorage.setItem('integralShop', JSON.stringify({ flag: false }))
                window.location.reload()
            }
        } else {
            sessionStorage.setItem('integralShop', JSON.stringify({ flag: true }))
        }
    }, [])


    return (
        <div className="My">
            <div className="MyTop">
                <div className="MyHead">
                    <Image fit="cover" round width={55} height={55} src="https://tse4-mm.cn.bing.net/th/id/OIP-C.8ow-Z_Mc9brHGmXRMdq1MAAAAA?dpr=1.5&pid=ImgDetMain" />
                    <div className="MyHeadRight">
                        <span onClick={() => setState('top')}>卢微微</span>
                        <div>黑金卡</div>
                        <div>信用良好 350</div>
                    </div>
                </div>
                <div className="equity">
                    <ul style={{ listStyle: "disc", fontSize: '12px' }}>
                        <li>预定最高2.2倍积分</li>
                        <li>延迟退房至12:00</li>
                    </ul>
                    <ul style={{ listStyle: "disc", fontSize: '12px' }}>
                        <li>预定最高2.2倍积分</li>
                        <li>延迟退房至12:00</li>
                    </ul>
                    <div>
                        <Image style={{ margin: '0 auto 5px' }} width={35} height={35} src="https://cdn8.axureshop.com/demo2024/764739/images/5_1%E6%88%91%E7%9A%84/u2271.png" />
                        <span style={{ color: 'red', fontSize: '12px' }}>更多权益</span>
                    </div>
                </div>
                <div className="order">
                    <div className="orderTop">
                        <span style={{ fontSize: '14px', textAlign: 'left', fontWeight: '700' }}>我的订单</span>
                        <span style={{ fontSize: '12px', textAlign: 'right', marginRight: '10px', color: '#999999' }}>全部订单<Arrow style={{ position: 'relative', top: '2px' }} /></span>
                    </div>
                    <div className="orderBottom">
                        <div>
                            <Image width={43} height={43} src="https://cdn8.axureshop.com/demo2024/764739/images/5_1%E6%88%91%E7%9A%84/u2305.png" />
                            <span>待付款</span>
                        </div>
                        <div>
                            <Image width={43} height={43} src="https://cdn8.axureshop.com/demo2024/764739/images/5_1%E6%88%91%E7%9A%84/u2306.png" />
                            <span>待入住</span>
                        </div>
                        <div>
                            <Image width={43} height={43} src="https://cdn8.axureshop.com/demo2024/764739/images/5_1%E6%88%91%E7%9A%84/u2307.png" />
                            <span>待评价</span>
                        </div>
                    </div>
                </div>
                <div className="prompt">
                    <span>即时掌握最新优惠信息，获取小红店动态！</span><button>去开启</button><Clear fontSize={18} color="#cccccc" />
                </div>
            </div>
            <div className="MyBottom">
                <div className="MyBottomTop">
                    <div>
                        <p className="head">8</p>
                        <p>优惠券</p>
                    </div>
                    <div>
                        <p className="head">7391</p>
                        <p>积分</p>
                    </div>
                    <div>
                        <p className="head">1</p>
                        <p>早餐券</p>
                    </div>
                </div>
                <div className="MyBottomBottom">
                    <div>
                        <Image width={36} height={36} src='https://cdn8.axureshop.com/demo2024/764739/images/5_1%E6%88%91%E7%9A%84/u2282.png' />
                        <span>商城订单</span>
                    </div>
                    <div>
                        <Image width={37} height={37} src="https://cdn8.axureshop.com/demo2024/764739/images/5_1%E6%88%91%E7%9A%84/u2288.png" />
                        <span>收藏酒店</span>
                    </div>
                    <div>
                        <Image onClick={() => { goToPage('/AI') }} width={37} height={37} src="https://cdn8.axureshop.com/demo2024/764739/images/5_1%E6%88%91%E7%9A%84/u2278.png" />
                        <span>客服中心</span>
                    </div>
                    <div>
                        <Image width={37} height={37} src="https://cdn8.axureshop.com/demo2024/764739/images/5_1%E6%88%91%E7%9A%84/u2294.png" />
                        <span>积分商城</span>
                    </div>
                    <div>
                        <Image width={37} height={37} src="https://cdn8.axureshop.com/demo2024/764739/images/5_1%E6%88%91%E7%9A%84/u2285.png" />
                        <span>资料设置</span>
                    </div>
                    <div>
                        <Image width={40} height={35} src="https://cdn8.axureshop.com/demo2024/764739/images/5_1%E6%88%91%E7%9A%84/u2291.png" />
                        <span>会员升级</span>
                    </div>
                </div>
            </div>
            <Popup
                visible={state === 'top'}
                style={{ height: '15%' }}
                position='top'
                onClose={onClose}
            >

                <Button plain hairline type='primary' onClick={()=>{
                    //退出登录
                    localStorage.removeItem('token');  
                    console.log('用户已退出，localStorage 中的 userToken 已被删除');  
                    window.location.href = '/login'; 
                }}>
                    退出登录
                </Button>
            </Popup>
        </div>
    )
}

export default My;